<template>
  <el-container class="sensitiveWord-setting">
    <el-main>
      <el-card shadow="never" class="commercial-tenant-title">
        <el-tabs v-model="tabsName" @tab-click="handleClick">
          <el-tab-pane label="欢迎语" name="0">
            <KfReplyWelcome :key="isShow0" />
          </el-tab-pane>
          <el-tab-pane label="忙中提醒" name="1">
            <KfReplyBusy :key="isShow1" />
          </el-tab-pane>
          <el-tab-pane label="不在线提醒" name="2">
            <KfReplyOffline :key="isShow2" />
          </el-tab-pane>
          <el-tab-pane label="智能回答" name="3">
            <KfReplySmart :key="isShow3" />
          </el-tab-pane>
          <el-tab-pane label="知识库" name="4">
            <KfReplyWiki :key="isShow4" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import KfReplyWelcome from './components/kfReplyWelcome'
import KfReplyBusy from './components/kfReplyBusy'
import KfReplyOffline from './components/kfReplyOffline'
import KfReplySmart from './components/kfReplySmart'
import KfReplyWiki from './components/kfReplyWiki'

export default {
  components: {
    KfReplyWelcome,
    KfReplyBusy,
    KfReplyOffline,
    KfReplySmart,
    KfReplyWiki
  },
  data() {
    return {
      isShow0: 0,
      isShow1: 0,
      isShow2: 0,
      isShow3: 0,
      isShow4: 0,
      tabsName: 0
    }
  },
  mounted() {
  },
  methods: {
    handleClick() {
      if (this.tabsName === '0') {
        this.isShow0++
      } else if (this.tabsName === '1') {
        this.isShow1++
      } else if (this.tabsName === '2') {
        this.isShow2++
      } else if (this.tabsName === '3') {
        this.isShow3++
      } else if (this.tabsName === '4') {
        this.isShow4++
      }
    }
  }
}
</script>

<style lang="scss">
.sensitiveWord-setting {}
</style>
